<script setup>
import { ref, watchEffect, reactive, computed,onMounted  } from 'vue'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
import { useChatListStore } from '@renderer/store/chatList'
import Avartar from '@renderer/components/common/Avartar.vue'
import {getEven , setEven} from '@renderer/api/index.js'

const route = useRoute()
const chatListStore = useChatListStore()


const id = ref(route.params.id)
const username = computed(() => chatListStore.findOneByID(id.value).username)
const type = computed(() => chatListStore.findOneByID(id.value).type)
const avartarSrc = computed(() => chatListStore.findOneByID(id.value).avartar)
// 当前信息
const currentVer = ref({})
const optionResult = ref({})

// jdk 版本
const options = ref([
    {
        label:"JDK8",
        value:"java8"
    },
    {
        label:"JDK11",
        value:"java11"
    },
    {
        label:"JDK17",
        value:"java17"
    },
    {
        label:"JDK21",
        value:"java21"
    }
])

const jdkVerson = ref('JAVA_HOME')
const switchVer = ()=>{
    let prarm = {JAVA_HOME:jdkVerson.value}
    setEven(prarm).then(res=>{
        optionResult.value = res
    })
}

onMounted(()=>{
    let param = {name:jdkVerson.value}
    getEven(param).then(res=>{
        currentVer.value = res
    })
})

// 每次路由变化都更改页面
onBeforeRouteUpdate((to) => {
    id.value = to.params.id
})

watchEffect(() => {

})
</script>

<template>
    <div class="container">
        <div class="chatting-view-header">
            <span class="nickname">{{ username }}</span>
        </div>
        <div class="message-list">
            <p>请输入 java8 则替换环境变量 JAVA_HOME 为 java_home8 </p>
            <p>请输入 java17 则替换环境变量 JAVA_HOME 为 java_home17</p>
            <p>因此，如果安装了多个JDK，请设置设置环境变量为Java_home version</p>
            <p>当前ＪＡＶＡ＿ＨＯＭＥ为 {{ currentVer.val }}</p>
            <el-select v-model="jdkVerson" placeholder="请选择设置JAVA_HOME的环境变量" style="width: 240px">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
                </el-select>
            <el-button type="primary" class="send-btn" size="small" @click="switchVer">切换</el-button>
        </div>
    </div>
</template>

<style scoped lang="scss">
@import '@renderer/assets/scss/mixins';

$header-height: 40px;

.container {
    width: 100%;
    height: 95%;
    display: flex;
    flex-direction: column;
}

.chatting-view-header {
    @include set-size($height: $header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;

    .nickname {
        margin-left: 15px;
        font: {
            size: 17px;
            weight: 600;
        }
    }
}

.message-list {
    @include overspread;
    border-top: 1px solid var(--border-color);
    flex-grow: 1;
    margin-top: 3px;
    overflow-y: auto;

    .message-block {
        width: 100%;
        display: flex;
        padding: 15px;
        box-sizing: border-box;
        gap: 5px;

        .message-content-bubble {
            max-width: calc(100% - 80px);
            border-radius: 10px;
            background-color: #e5e5e5;
            padding: 10px;
            user-select: text;
            cursor: default;

            .message-text {
                font: {
                    size: 16px;
                    weight: 500;
                }
            }
        }

        &:last-child {
            margin-bottom: 35px;
        }
    }

    .my-message-block {
        flex-direction: row-reverse;

        .message-content-bubble {
            background-color: var(--theme-color);
            color: var(--fg-color-3);

            ::selection {
                background-color: var(--selection-color);
                color: white;
            }
        }
    }
}

.send-context{
    text-align:center;
    position: relative;
    .textarea{
        margin: 0 auto;
        outline: none;
        border: none;
        resize: none;
        width: 98%;
        height: 100px
    }
    .send-btn{
        position: absolute;
        right: 4px;
        bottom: 4px;
    }
}
</style>
